import clsx from 'clsx';

export interface ListTabProps {
	className?: string;
	tabs: {
		value: string;
		title: string;
		count?: number;
	}[];
	initialValue: string;
	onChange?: (value: string) => void;
}

const ListTab: React.FC<ListTabProps> = props => {
	const [activeTab, setActiveTab] = useState(props.initialValue ?? '1');
	const tabRef = useRef<HTMLDivElement>(null);
	const { className, tabs = [] } = props;

	useEffect(() => {
		const line = tabRef.current?.querySelector('.active-line') as HTMLDivElement;
		if (line) {
			const activeTabElement = tabRef.current?.querySelector(
				`[data-value="${activeTab}"]`
			) as HTMLDivElement;
			if (activeTabElement) {
				// const info = activeTabElement.getBoundingClientRect();
				line.style.width = `${activeTabElement.offsetWidth}px`;
				line.style.left = `${activeTabElement.offsetLeft}px`;
			}
		}
	}, [activeTab]);
	return (
		<div className={clsx('flex px-6 py-5  items-center w-full relative', className)} ref={tabRef}>
			{tabs.map(item => {
				return (
					<div
						key={item.value}
						className={` mr-9 cursor-pointer `}
						onClick={() => {
							setActiveTab(item.value);
							props?.onChange?.(item.value);
						}}
						data-value={item.value}
					>
						<ABadge count={item.count} offset={[15, 0]}>
							<span
								className={`text-5 lh-8 ${activeTab === item.value ? 'color-primary' : 'color-#999'}`}
							>
								{item.title}
							</span>
						</ABadge>
					</div>
				);
			})}
			<div className="active-line absolute bottom-0 left-0  h-1 w-20 bg-primary transition-all duration-500 ease-out"></div>
		</div>
	);
};
export default ListTab;
